* {
  box-sizing: border-box;
  font-family: "Varela Round", sans-serif;
}

body,
html {
  margin: 0;
  padding: 0;
  background-color: #fff;
}
.center-content {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: block;
}
.row {
  display: inline-block;
  width: 100%;
}
.column {
  display: inline-block;
  float: left;
  width: 100%;
}
.column-3-4 {
  width: 75%;
}
.column-1-2 {
  width: 50%;
}
.column-1-3 {
  width: 33.333%;
}
.column-1-4 {
  width: 25%;
}
.column1-5 {
  width: 20%;
}
section {
  padding: 100px 0;
}
/*-------------------class-------------------------------*/

.arrow {
  font-size: 15px;
  text-transform: uppercase;
  color: #353535;
  letter-spacing: 1px;
  padding-bottom: 30px;
  font-weight: bold;
  text-align: center;
}
span {
  color: #8c9398;
}
.text {
  color: #8c9398;
  word-spacing: 1px;
  line-height: 25px;
  font-size: 14px;
  letter-spacing: 1px;
  text-align: center;
  font-size: 20px;
}
.width {
  max-width: 500px;
}
.column-1-3 {
  display: inline-block;
  width: 33%;
  padding: 0;
  margin: 0;
}
.banner {
  display: block;
  background-size: cover;
  background-attachment: fixed;
  height: 350px;
}
.grey {
  /*   color: #a1a9b0; */
  alist-style: none;
  text-decoration: none;
  font-size: 14px;
}

/* ---------------------- Head ---------------------------------*/
.home {
  background: url(@/assets/images/2016-06-04-roman-drits-barnimages-001.jpg)
    no-repeat center;
  background-size: cover;
  padding: 65px 0 420px 0;
}
.header {
  padding-top: 170px;
  text-align: center;
  margin: 0 auto;
}
.home h1 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  font-size: 40px;
  letter-spacing: 12px;
  margin: 10px;
}

.button {
  background: rgba(61, 201, 179, 1);
  padding: 20px 40px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block; /* QS */
  box-shadow: 0px 3px 0px 0px #309383;
  margin: 60px 0 0;
  font-weight: bold;
  border-radius: 5px;
  font-size: 14px;
  /*   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); */
  text-decoration: none;
}

/*------------------------tamplate section------------------------*/
.top-content {
  /*   outline: thin solid red; */
  background: #f3f5f8;
  padding: 90px 0 100px;
  margin: 0;
  text-align: center;
  display: block;
}

.top-content p {
  /*   outline: thin solid red; */
  margin: 60px auto;
  color: #8c9398;
  word-spacing: 1px;
  line-height: 25px;
  font-size: 14px;
  width: 800px;
}
.top-content a {
  color: #353535;
  text-decoration: none;
}
.top-content a:hover {
  color: #428bca;
}

/*-----------------------web section--------------------------------*/
.second-content {
  bacground-color: #fff;
  text-align: center;
  padding: 90px 0 100px 0;
  display: block;
}
.icon {
  /*   outline: thin solid red;  */
  height: 175px;
  width: 175px;
  max-width: 100%;
  background: #3dc9b3;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 50px;
}
.icon .fa {
  /*   outline: thin solid red;  */
  color: #fff;
  font-size: 55px;
  line-height: 175px;
}
.shadow {
  text-shadow: rgb(55, 181, 161) 1px 1px, rgb(55, 181, 161) 2px 2px,
    rgb(55, 181, 161) 3px 3px, rgb(55, 181, 161) 4px 4px,
    rgb(55, 181, 161) 5px 5px, rgb(55, 181, 161) 6px 6px,
    rgb(55, 181, 161) 7px 7px, rgb(55, 181, 161) 8px 8px,
    rgb(55, 181, 161) 9px 9px, rgb(55, 181, 161) 10px 10px,
    rgb(55, 181, 161) 11px 11px, rgb(55, 181, 161) 12px 12px,
    rgb(55, 182, 162) 13px 13px, rgb(55, 183, 163) 14px 14px,
    rgb(56, 184, 164) 15px 15px, rgb(56, 185, 165) 16px 16px,
    rgb(56, 186, 166) 17px 17px, rgb(57, 187, 167) 18px 18px,
    rgb(57, 188, 168) 19px 19px, rgb(57, 189, 169) 20px 20px,
    rgb(58, 191, 170) 21px 21px, rgb(58, 192, 171) 22px 22px,
    rgb(58, 193, 172) 23px 23px, rgb(59, 194, 173) 24px 24px,
    rgb(59, 195, 174) 25px 25px, rgb(59, 196, 175) 26px 26px,
    rgb(60, 197, 176) 27px 27px, rgb(60, 198, 177) 28px 28px,
    rgb(60, 199, 178) 29px 29px, rgb(61, 201, 179) 30px 30px;
}

.third-content {
  width: 100%;
  display: block;
}

.phone-image {
  /*   outline: thin solid red; */
  background-color: #f3f5f8;
  box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1);
  display: inline-block;
  background-image: url(https://tympanus.net/Freebies/HalcyonDaysTemplate/img/iphone-bg.png);
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
}
.white {
  /*   outline: thin solid red;   */
  background-color: #fff;
  padding: 80px 90px;
  display: inline-block;
  positon: relative;
  height: 100%;
  width: 50%;
  float: right;
}
.text p {
  display: inline-block;
  position: relative;
}

/*=============second-background-section============*/
.flower {
  /*   outline: thin solid red;  */
  display: block;
  background-image: url(https://tympanus.net/Freebies/HalcyonDaysTemplate/img/plants-bg.jpg);
}
.flower div {
  /*   outline: thin solid red; */
  display: block;
  text-align: center;
  color: #fff;
  padding: 70px 0 120px 0;
}
.flower h1 {
  /*   outline: thin solid red; */
  font-size: 40px;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: 500;
  line-height: 1.1;
}
.flower span {
  /*   outline: thin solid green; */
  font-size: 23px;
  margin-top: 20px;
  color: #fff;
  letter-spacing: 5px;
  font-weight: 300;
}

/*------------------------creative section-----------*/

.creative {
  margin: 0;
  padding: 15px;
  list-style: none;
  display: inline-block;
}
.creative img {
  width: 100%;
  height: auto;
}
/*==================================third-background====================*/
.black {
  background-color: #242830;
  padding: 70px 0;
  text-align: center;
}
.second-button {
  display: inline-block;
  padding: 25px 40px;
  color: #fff;
  border: solid 1px #fff;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  text-decoration: none;
  text-align: center;
  transition: 300ms linear all;
}
.second-button:hover {
  color: rgba(61, 201, 179, 1);
  border-color: rgba(61, 201, 179, 1);
}

/*------------------------people-section-----------------*/
.wapper {
  display: inline-block;
  text-align: center;
}

.buttons {
  /*   outline: thin solid red; */
  margin-top: 25px;
  padding: 0;
  display: block;
  text-align: cetner;
}
.buttons i {
  /*   outline: thin solid red; */
  display: inline-block;
  width: 40px;
  height: 40px;
  color: #fff;
  background: black;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  border-radius: 50%;
  margin: 5px;
}
.buttons i:hover {
  color: #fff;
  background-color: rgba(61, 201, 179, 1);
}

/*===================third-background-section======================*/
.cup {
  background: url(https://tympanus.net/Freebies/HalcyonDaysTemplate/img/keyboard-bg.jpg);
  padding: 120px 0 140px;
  display: block;
  background-size: cover;
  background-attachment: fixed;
}
.cup h1 {
  /*   outline: thin solid green; */
  color: #fff;
  margin-bottom: 40px;
  padding: 0;
}
.searching {
  /*   outline: thin solid green; */
  text-align: center;
  display: block;
  margin: 0;
  padding: 0;
}
.searching input[type="text"] {
  /*   outline: thin solid green; */
  background-color: rgba(255, 255, 255, 0.1);
  border: solid 1px #fff;
  padding: 20px;
  width: 30%;
}
.searching input[type="submit"] {
  background: rgba(61, 201, 179, 0.5);
  border: solid 1px rgba(61, 201, 179, 0.5);
  padding: 20px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/*-----------contact section--------------*/
.contact {
  background: #f3f5f8;
}
.contact .arrow {
  /*   outline: thin solid red; */
  padding-bottom: 0px;
}

.row .column {
  padding: 0px 20px 0px 0px;
}
.row .column:first-child {
  padding-left: 20px;
}
.box {
  /*   outline: thin solid red; */
  background-color: #fff;
  padding: 30px 0;
  margin: 70px 0;
  text-align: center;
}
.box i {
  /*   outline: thin solid green; */
  display: inline-block;
}
.box span {
  /*  outline: thin solid green; */
  display: block;
  color: #3dc9b3;
  letter-spacing: 1px;
  margin-top: 15px;
}
.buttons {
  text-align: center;
}

.container {
  padding: 15px 0;
}

/*-------------fotter-------------------------*/
footer {
  background-color: #242830;
  padding: 40px 0 30px;
}

.row ul {
  /*   outline: thin solid red; */
  display: inline-block;
  line-height: 25px;
  text-align: left;
}
footer li {
  display: inline-block;
  text-decoration: none;
}
footer li a {
  color: #a1a9b0;
}

footer p {
  color: #fff;
  text-align: right;
  word-spacing: 1px;
  line-height: 25px;
}
footer p em {
  color: #a1a9b0;
  text-decoration: none;
}

@media all and (max-width: 1220px) {
  /* Laptop */
  .center-content {
    max-width: 960px;
  }
}

@media all and (max-width: 1000px) {
  /* tablet portrait */
  .center-content {
    max-width: 640px;
  }
  .column-1-3 {
    width: 50%;
  }
  .column-1-3.last-child {
    width: 100%;
  }
  .arrow {
    margin-bottom: 20px;
  }
  .top-content p {
    width: 100%;
  }
  .text {
    width: 100%;
  }
  .second-content h1 {
    margin-bottom: 40px;
  }
  .white {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 80px 30px;
    display: inline-block;
    positon: relative;
    height: 100%;
    width: 100%;
    float: right;
    /* color: #333; */
  }
  .creative {
    text-align: center;
  }
  .creative img.dog {
    width: 50%;
  }

  .searching input[type="text"] {
    padding: 11px;
  }
  .searching input[type="submit"] {
    padding: 11px;
  }
  .contact .box {
    /*     outline: thin solid green; */
    margin: 0;
  }
  .contact .arrow {
    margin-bottom: 50px;
  }
  .contact .last-child {
    margin-top: 20px;
  }
}
.last-buttons {
  display: block;
  width: 100%;
}

@media all and (max-width: 680px) {
  /* mobile */
  .center-content {
    max-width: 320px;
  }
  .column-1-3 {
    width: 100%;
  }
}
